<template>
  <div class="container">
    <div v-for="row in tableData" :key="row.id" class="item-panel">
      <div class="item-content">{{ row.content }}</div>
      <div class="item-sign">{{ row.nickName }}({{ row.userId }})
      <el-button type="text" @click="confirmDelete(row)">删 除</el-button></div>
    </div>
        <el-pagination
      :page-size="pageSize"
      :current-page.sync="pageNo"
      @current-change="getList()"
      :total="total"
      layout="prev, pager, next"
      style="right: 1.5vw; position: absolute;margin-top:1vw;"
    >
    </el-pagination>
  </div>
</template>

<style>
.item-panel{
  width: 100%;
  height: 8vw;
  font-size: 0.875vw;
  padding: 1vw;
  background-color: white;
  border-radius: 0.21875vw;
  margin-top: 1vw;
}
.item-panel .item-content{
  width: 100%;
  height: 4vw;
}
.item-panel .item-sign{
  right:1.5vw;
  position:absolute;
}
</style>

<script>
export default {
  data() {
    return {
      total: 0,
      pageNo: 1,
      pageSize: 4,
      tableData: [],
    };
  },
  methods: {
    getList() {
      let that = this;
      let query = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      };
      query.role = this.role;
      query[this.select] = this.searchField;
      let queryStr = this.$query.stringify(query);
      this.$axios.get(`/api/v1/suggests?${queryStr}`).then((data) => {
        that.total = data.totalCount;
        that.pageNo = data.pageNo;
        that.tableData = data.suggests;
      });
    },
    confirmDelete(row) {
      let that = this;
      this.$axios
        .delete("/api/v1/suggest?id=" + row.id)
        .then((data) => {
          if (data.result) {
            that.$message.success({
              message: "删除成功",
              center: true,
              offset: screen.availHeight * 0.32,
              duration: 1200,
            });
            that.getList();
          }
        })
        .catch((err) => {
          that.$message.error({
            message: err.data.message,
            center: true,
            offset: screen.availHeight * 0.32,
            duration: 1200,
          });
        });
    },
  },
  computed: {},
  beforeMount() {
    this.$axios.post("/api/v1/user/verified");
    this.getList();
  },
};
</script>
